<template>
  <div class="main-container">
    <!-- 店铺背景 -->
    <div
      class="Background_map"
      :style="{
        background: `url(${sellerdata.avatar}) no-repeat center/cover `,
      }"
    ></div>

    <!-- 主要内容 -->
    <div class="primary_coverage">
      <!-- 头部 -->
      <div class="main-header">
        <div class="main_header_title">
          <img :src="sellerdata.avatar" />
          <div class="header_title_center">
            <p class="name">
              <span class="brand">品牌</span>{{ sellerdata.name }}
            </p>
            <p class="describe">
              <span>{{ sellerdata.description }}</span
              >/ <span>{{ sellerdata.deliveryTime }}分钟到达</span>
            </p>
            <p class="meal">
              <!-- <span class="reduce">减</span> -->
              <span
                v-for="item in sellerdata.supports"
                :key="item"
                class="supports"
                ><span class="reduce">减</span>{{ item }}</span
              >
            </p>
          </div>
          <div class="header_title_right">
            <span class="arrow" @click="hitadsa">
              <span>{{ ArrowNum }} </span>个
              <i class="iconfont icon-jiantouyou"></i
            ></span>
          </div>
        </div>
        <div class="main_header_NoticeBar">
          <van-notice-bar mode="link" :text="sellerdata.bulletin" />
          <span class="notice">公告</span>
          <!-- <span class="get_into">&gt;</span> -->
        </div>
      </div>

      <!-- 导航 -->
      <div class="main-navbar">
        <van-tabs color="rgb(255, 195, 0)" v-model="active">
          <van-tab
            v-for="obj in tabarr"
            :key="obj.name"
            :to="obj.to"
            :title="obj.name"
          ></van-tab>
        </van-tabs>
      </div>

      <!-- 路由出口 -->
      <div class="router_view">
        <router-view />
      </div>
    </div>

    <!-- 蒙层 -->
    <div class="Mantle" v-show="flag">
      <div class="Mantle_1">
        <p>{{ sellerdata.name }}</p>
        <p>
          <van-rate
            v-model="sellerdata.score"
            :size="24"
            color="rgb(248, 181, 25)"
            void-icon="star"
            void-color="#eee"
            readonly
          />
        </p>
      </div>
      <div class="Mantle_2">
        <div></div>
        <span>优惠信息</span>
        <div></div>
      </div>

      <div class="Mantle_3">
        <p v-for="item in sellerdata.supports" :key="item" class="supports">
          <span class="reduce">减</span>{{ item }}
        </p>
      </div>
      <div class="Mantle_2">
        <div></div>
        <span>商家公告</span>
        <div></div>
      </div>
      <div class="Mantle_4">
        <p>{{ sellerdata.bulletin }}</p>
      </div>
      <div class="Mantle_5">
        <i class="iconfont icon-guanbi" @click="hitadsa"></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_getseller } from "@/apis/goods";
import { ISeller, ITab } from "../interface/goodsinterface"; //约束商家

@Component
export default class Main extends Vue {
  active: number = 0; //导航条默认激活
  flag: boolean = false;
  ArrowNum: number = 0; //满减商品个数
  sellerdata: ISeller = {}; //约束商家信息

  tabarr: Array<ITab> = [
    { name: "商品", to: "/main/goods" },
    { name: "评价", to: "/main/evaluate" },
    { name: "商家", to: "/main/merchant" },
  ];
  hitadsa(): boolean {
    // console.log(this.flag);
    
    this.flag =! this.flag ;
    return this.flag
  }
  created(): void {
    //重置激活样式,修复导航条激活样式,刷新总在第一个激活样式
    switch (this.$route.path) {
      // active: number = 0; //导航条默认激活
      case "/main/goods":
        this.active = 0;
        break;
      case "/main/evaluate":
        this.active = 1;
        break;
      case "/main/merchant":
        this.active = 2;
        break;
    }

    //获取商家数据
    $_getseller().then((res) => {
      //商家数据
      this.sellerdata = res.data.data;
      // console.log(res.data.data, 1111);

      // 转化arrownum值
      let arrownum = this.sellerdata.supports;
      this.ArrowNum = arrownum ? arrownum.length : 0;
    });
  }
}
</script>

<style lang="scss" scoped>
//通过修改变量,可以实现界面整体换效果
// $primary-color: rgb(34, 34, 34);
// $base-color: rgb(255, 195, 0);
//less: @定义变量   sass: $定义变量,都支持嵌套
@import "../assets/styles/theme.scss";

.main-container {
  display: flex;
  flex-direction: column;
  // overflow: hidden;
  height: 100%;
  align-items: center;

  //背景图片
  .Background_map {
    filter: blur(1.8px) brightness(0.52); //背景图模糊度
    // filter: brightness(0.7); //背景图亮度
    height: 140px;
    width: 100%;
    z-index: -1;
    position: absolute;

    // background: url("../assets/images/notice-bar.jpg") no-repeat cover;
  }
  //主要内容
  .primary_coverage {
    width: 100%;
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: column;
  }

  //头部
  .main-header {
    height: 140px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .main_header_title {
      display: flex;
      flex: 1;
      justify-content: space-around;
      // justify-content:center;
      align-items: center;

      img {
        width: 64px;
        height: 64px;
        border-radius: 2px;
        margin-left: 20px;
        margin-right: 5px;
      }

      .header_title_center {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70px;
        width: 194px;

        //动态布局
        margin-left: 10px;
        flex: 1;
        //店铺名字
        .name {
          font-weight: bold;
          color: #fff;
          //字体
          font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei",
            华文细黑, STHeiti, MingLiu span {
            font-weight: normal;
          }
        }
        // 品牌
        .brand {
          background-color: rgb(245, 69, 69);
          width: 30px;
          color: #fff;
          margin-right: 15px;

          line-height: 18px;
          display: inline-block;
          font-size: 12px;
          vertical-align: bottom; //基线
          text-align: center;
          border-radius: 2px;
        }
        //描述
        .describe {
          font-size: 10px;
          color: #fff;
        }
        //套餐
        .meal {
          font-size: 12px;
          color: #fff;
          white-space: nowrap; //是强制显示为一行
          text-overflow: ellipsis; //将文本溢出显示为（…）
          overflow: hidden; //溢出隐藏
        }
        //套餐
        .supports {
          margin-right: 8px;
        }
        //减
        .reduce {
          background-color: #fff;
          width: 18px;
          color: rgb(245, 69, 69);
          margin-right: 5px;
          //基线
          display: inline-block;
          font-size: 12px;
          vertical-align: text-bottom;
          text-align: center;
          border-radius: 2px;
        }
      }

      .header_title_right {
        // display: flex;
        // align-items: flex-end;//侧轴的底部为起点
        height: 70px;
        position: relative;
        width: 52px;
        margin: 0 10px;
        .arrow {
          width: 48px;
          font-size: 10px;
          line-height: 24px;
          background-color: rgba(47, 47, 47, 0.582);
          text-align: center;
          border-radius: 14px;
          color: #fff;
          position: absolute;
          padding-left: 3px;
          bottom: -5px;
          left: -5px;

          //图标

          .icon-jiantouyou {
            font-size: 10px;
          }
        }
      }
    }

    //滚动通知
    .main_header_NoticeBar {
      position: relative;
      .van-notice-bar {
        color: #ffffff;
        font-size: 14px;
        // line-height: 14px;
        background-color: rgba(47, 47, 47, 0.582);
        padding-left: 60px;
        height: 30px;
      }
      //公告
      .notice {
        position: absolute;
        left: 14px;
        top: 8px;
        background-color: rgb(255, 255, 255);
        width: 32px;
        color: rgb(82, 79, 79);
        font-weight: bold;
        margin-right: 14px;
        line-height: 16px;
        //基线
        display: inline-block;
        font-size: 10px;
        vertical-align: bottom;
        text-align: center;
        border-radius: 2px;
      }
    }
  }

  //导航
  .main-navbar {
    border-bottom: 1px solid rgb(246, 246, 246);
  }

  // 选项卡高度
  ::v-deep.van-tabs__wrap {
    height: 36px;
  }
  .van-sidebar-item {
    height: 56px;
  }

  //路由出口
  .router_view {
    // height: 100%;
    flex: 1;
    overflow: hidden;
  }
}

.Mantle {
  width: 100%;
  height: 100%;
  background-color: rgba(29, 29, 29, 0.904);
  position: fixed;
  z-index: 999999999;
  padding-top: 50px;
  .Mantle_1 {
    color: rgb(255, 255, 255);
    text-align: center;
    p {
      font-size: 18px;
      margin-bottom: 10px;
    }
  }
  .Mantle_2 {
    display: flex;
    height: 20px;
    margin: auto;
    width: 80%;
    span {
      color: #fff;
      // display: inline-block;
      // vertical-align: top;
      margin-top: 7px;
      margin: 7px 12px 0;
    }
    div {
      border-bottom: 1px solid rgb(246, 246, 246);
      flex: 1;
    }
  }
  .Mantle_3 {
    display: flex;
    // height: 20px;
    margin: auto;
    flex-direction: column;
    width: 80%;
    margin-top: 50px;
    //  height: 200px;
    box-sizing: border-box;
    p {
      color: #fff;
      margin-bottom: 20px;
    }

    .reduce {
      background-color: #fff;
      width: 18px;
      color: rgb(245, 69, 69);
      margin-right: 5px;
      //基线
      display: inline-block;

      font-size: 12px;
      vertical-align: text-bottom;
      text-align: center;
      border-radius: 2px;
    }
  }
  .Mantle_4 {
    display: flex;
    height: 20px;
    margin: auto;
    width: 80%;
    margin-top: 30px;
    p {
      color: #fff;
    }
  }
  .Mantle_5 {
    position: fixed;
    width: 100%;
    bottom: 40px;
    // background-color: rgb(231, 110, 110);
    text-align: center;
  }
  .icon-guanbi {
    color: rgb(255, 255, 255);
    font-size: 28px;
  }
}
</style>